<template>
  <div class="container">
    <div class="header">
      <h2><strong>欢迎来到贪吃蛇大作战</strong></h2>
    </div>
    <div class="content clear-float">
      <div class="content-l">
        <LeaderBoarder></LeaderBoarder>
      </div>
      <div class="content-m">
        <Snake></Snake>
      </div>
      <div class="content-r">
        <el-button  type="success" @click="setFoot"> 点击开始游戏</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import LeaderBoarder from './LeaderBoarder';
  import Snake from './Snake';
  import commUtils from "../comm/js/commUtils";

  export default {
    data() {
      return {
        name: "HomePage"
      }
    },
    components: {
      LeaderBoarder,
      Snake,
    },
    mounted() {

    },
    methods: {
      beginGame() {

      },
      setFoot(){
        let row = Math.floor(Math.random() * 15 + 1);
        let col = Math.floor(Math.random() * 15 + 1);
        console.log(row + " . " + col);
        this.$store.commit('snake/setFoot', {row, col});
      }
    }
  }
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .clear-float::after, .clear-float::before {
    content: '';
    display: block;
    clear: both;
  }

  .container {
    width: 1080px;
    height: 600px;
    margin: 0 auto;
    /*background-color: #CCCCCC;*/
  }

  .header {
    height: 50px;
    padding-top: 20px;
  }

  .content {
    position: relative;
    height: 540px;
  }

  .content-l, .content-m, .content-r {
    /*background-color: silver;*/
    float: left;
    height: 100%;
    border: 0;
  }

  .content-l {
    width: 30%;
  }

  .content-m {
    width: 594px;
    /*background-color: #DCDFE6;*/
  }

  .content-r {
    width: 15%;
    /*background-color: red;*/
  }
</style>
